<template>
    <div class="app-container2 shebeiguzhang_warp">
      <div class="left_box">
        <el-input
          v-model="searchValue"
          class="seach_input js_common_input2"
          placeholder="搜索"
          suffix-icon="el-icon-search"
          clearable
          size="small"
          style="margin-bottom: 20px"
        />
        <div class="left_tree">
          <el-scrollbar class="el-scrollbar-bai">
            <el-tree
              class="js_common_tree"
              :data="treeDate"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="label"
              ref="tree"
              :filter-node-method="filterNode"
              current-node-key="板卡1"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </el-scrollbar>
        </div>
      </div>
      <div class="right_box">
        <div class="right_main">
          <div class="top_btns_wrap">
            <div class="btns_list">
              <el-button class="js_common_btn" @click="showDialog(1)"
                >诊断规则配置</el-button
              >
            </div>
            <div class="btns_list">
              <el-button class="js_common_btn">开始故障诊断</el-button>
              <el-button class="js_common_btn">停止故障诊断</el-button>
            </div>
          </div>
          <div class="tabbar_wrap">
            <div class="tabbar_list">
              <div
                :class="['tabbar_item', item.id === actTabbarItem && 'act']"
                v-for="item in tabbarList"
                :key="item.id"
                @click="onChangeTabbarItemFn(item.id)"
              >
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="right_content_wrap">
            <div class="content_table">
              <components :is="actTabbarItem" />
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="规则配置"
        :visible.sync="dialogVisible1"
        width="50%"
        custom-class="jk_common_dialog01"
        :show-close="false"
      >
        <div class="dialog_center">
          <div class="con">
            <div class="con-left-table">
              <div style="text-align: right">
                <el-button class="js_common_btn">加载诊断规则</el-button>
              </div>
              <br />
              <el-table
                v-if="dialogVisible1"
                class="jk_common_table003"
                :data="tableData1"
                height="style"
                border
                style="width: 100%; height: 400px"
              >
                <el-table-column label="序号" align="center" width="100">
                  <template slot-scope="scop">
                    {{ scop.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="设备名称"> </el-table-column>
                <el-table-column prop="type" label="设备类型"> </el-table-column>
                <el-table-column prop="rule" label="诊断规则">
                  <template slot-scope="scope">
                    <div class="table_flag_seclet">
                      <el-select
                        class="js_common_select"
                        v-model="scope.row.rule"
                        popper-class="js_common_fenyeqi_popper"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in tableSelectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="desc" label="诊断规则说明">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div slot="footer">
          <div class="btns_wrap">
            <el-pagination
              class="js_common_fenyeqi"
              :current-page="1"
              :page-size="10"
              :pager-count="5"
              :append-to-body="false"
              popper-class="js_common_fenyeqi_popper"
              layout="prev, pager, next"
              :total="400"
            >
            </el-pagination>
            <div class="sure_btn" @click="dialogVisible1 = false">确定</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import tab1 from "./components/tab1.vue";
  import tab2 from "./components/tab2.vue";
  import tab3 from "./components/tab3.vue";
  
  export default {
    data() {
      return {
        searchValue: "",
        tabbarList: [
          {
            id: "tab1",
            name: "设备1",
          },
          {
            id: "tab2",
            name: "设备2",
          },
          {
            id: "tab3",
            name: "设备3",
          },
        ],
        actTabbarItem: "tab1",
        tableSelectOptions: [
          {
            value: "与",
            label: "与",
          },
          {
            value: "或",
            label: "或",
          },
          {
            value: "非",
            label: "非",
          },
        ],
        //左侧树数据
        treeDate: [
          {
            label: "DOS系统",
            children: [
              {
                label: "操作员站1",
                children: [],
              },
              {
                label: "操作员站2",
                children: [],
              },
              {
                label: "历史服务器",
                children: [],
              },
              {
                label: "计算服务器",
                children: [],
              },
              {
                label: "通信服务器",
                children: [],
              },
              {
                label: "控制站1",
                children: [],
              },
              {
                label: "控制站2",
                children: [
                  {
                    id: 1,
                    label: "板卡1",
                  },
                  {
                    label: "板卡2",
                  },
                ],
              },
              {
                label: "网关",
                children: [],
              },
              {
                label: "交换机",
                children: [],
              },
              {
                label: "打印机",
                children: [],
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
        dialogVisible1: false,
        tableData1: [
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
          {
            id: "001",
            name: "D2111",
            type: "计算服务器",
            rule: "请选择",
            desc: "诊断规则说明",
          },
        ],
      };
    },
    components: {
      tab1,
      tab2,
      tab3,
    },
    watch: {
      // 根据搜索节点
      searchValue(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods: {
      showDialog(item) {
        if (item == 1) {
          this.dialogVisible1 = true;
        }
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      //tree点击节点
      handleNodeClick(cell, node) {
        console.log(cell, node);
      },
      onChangeTabbarItemFn(cptName) {
        this.actTabbarItem = cptName;
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .shebeiguzhang_warp {
    width: 100%;
    display: flex;
  
    .left_box {
      flex: 0 0 auto;
      background: linear-gradient(to top, #163d71, #185a85, #163d71);
      box-sizing: border-box;
      width: 250px;
      padding: 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
  
      ::v-deep .seach_input {
        border-radius: 30px;
        flex: 0 0 auto;
  
        .el-input__icon {
          color: rgba(31, 133, 190, 1);
        }
  
        .el-input__inner {
          border-radius: 30px;
          border: 1px solid #185a85;
        }
      }
  
      .left_tree {
        flex: 1 1 auto;
      }
    }
  
    .right_box {
      margin-left: 20px;
      width: 0;
      flex: 1 1 auto;
      box-sizing: border-box;
  
      .right_main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
  
        .top_btns_wrap {
          flex: 0 0 auto;
          width: 100%;
          height: 62px;
          background: linear-gradient(to bottom, #124181, #113c78);
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 20px;
  
          .btns_list {
            display: flex;
            align-items: center;
          }
        }
  
        .right_bk {
          background: #0e2142;
        }
  
        .tabbar_wrap {
          flex: 0 0 auto;
          margin: 16px 0 0 0;
          width: 100%;
          height: 68px;
          border-bottom: 3px solid #216bad;
          position: relative;
  
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #26527d;
            bottom: 8px;
            left: 0;
            right: 0;
          }
  
          .tabbar_list {
            display: flex;
            align-items: center;
            height: 100%;
  
            .tabbar_item {
              width: 220px;
              height: 100%;
              background: linear-gradient(to right, #173b6e, #184f7c, #173b6e);
              font-size: 18px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              color: #cbcbcb;
              margin-left: 6px;
  
              &:first-child {
                margin-left: 0;
              }
  
              &.act,
              &:hover {
                background: linear-gradient(to right, #21569e, #2378b6, #21569e);
                position: relative;
                z-index: 2;
              }
            }
          }
        }
  
        .right_content_wrap {
          flex: 1 1 auto;
          height: 0;
          background-color: #0e2142;
          padding-top: 10px;
  
          .content_table {
            width: 100%;
            height: 100%;
            color: #fff;
          }
        }
      }
    }
  
    .dialog_center {
      .con {
        .con-left {
          width: 100%;
          height: 200px;
          padding: 10px;
          background: #15427c;
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
  
          .text-list {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
  
          img {
            width: 180px;
            height: 180px;
            margin-right: 10px;
          }
        }
  
        .con-left-table {
          width: 100%;
          // background: #154280;
        }
      }
    }
  }
  </style>
  